<template>
  <div class="dialog" v-if="form">
    <div class="title">业务系统基本信息</div>
    <div class="wrap1" v-if="form.cloudUp">
      <div>
        <div>系统名称:</div>
        {{ form.cloudUp.projectname }}
      </div>
      <div>
        <div>云服务商:</div>
        {{ form.cloudUp.supplierName }}
      </div>
      <div>
        <div>上线时间:</div>
        {{ form.cloudUp.onlinetime }}
      </div>
      <div>
        <div>上云区域:</div>
        {{ form.cloudUp.cloudUpAreaValue }}
      </div>
      <div>
        <div>业务部门:</div>
        {{ form.cloudUp.officeName }}
      </div>
      <div>
        <div>业主方联系人:</div>
        {{ form.cloudUp.contactsNickName }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.contactsinfo }}
      </div>
      <div>
        <div>邮箱:</div>
        {{ form.cloudUp.email }}
      </div>
      <div>
        <div>承建单位:</div>
        {{ form.cloudUp.constunit }}
      </div>
      <div>
        <div>承建方联系人:</div>
        {{ form.cloudUp.constcts }}
      </div>
      <div>
        <div>联系电话:</div>
        {{ form.cloudUp.constctsinfo }}
      </div>
      <div>
        <div>邮籍:</div>
        {{ form.cloudUp.constemail }}
      </div>
      <div style="width: 100%">
        <div style="width: auto">系统建设（运维）资金来源:</div>
        {{ form.cloudUp.fundFrom }}
      </div>
      <div style="width: 100%">
        <div style="width: auto">自行落实部门上云经费:</div>
        {{ form.cloudUp.fundBySelf ? "是" : "否" }}
      </div>
      <div style="width: 100%">
        <div>项目简介:</div>
        {{ form.cloudUp.introduction }}
      </div>
      <div style="width: 100%">
        <div>申请理由:</div>
        {{ form.cloudUp.remarks }}
      </div>
    </div>
    <div class="title">申请资源</div>
    <div style="width: 100%">
      <label style="margin-right: 10px">服务商:</label>
      <span>{{ form.cloudSupplier_label }}</span>
    </div>
    <el-button
      type="primary"
      v-if="taskName == '资源申请'"
      style="padding: 10px 40px; margin: 20px 0"
      @click="showAdd(1, false)"
      >新增</el-button
    >
    <div class="wrap">
      <div class="wrap_title">
        <div>服务器</div>
      </div>
      <!-- max-height: 500px;overflow-y: scroll; -->
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          height="400"
          v-if="form.hosts"
          :data="[].concat(form.hosts)"
          style="width: 100%; margin-top: 13px; font-size: 10px"
        >
          <el-table-column label="资源类型">
            <template slot-scope="scope">
              {{
                scope.row.flavorType == 1
                  ? "云服务器"
                  : scope.row.flavorType == 2
                  ? "高性能服务器"
                  : scope.row.serverCode
                  ? "数据库"
                  : "存储产品"
              }}
            </template>
          </el-table-column>
          <el-table-column label="实例名称">
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType">{{ scope.row.hostName }}</span>
              <span v-else-if="scope.row.serverCode">{{ scope.row.hostInstanceName }}</span>
              <span v-else-if="!scope.row.hostInstanceNames.length"></span>
              <div v-else style="margin-bottom: 6px" v-for="(item, index) in scope.row.hostInstanceNames" :key="index">
                {{ item }}
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="可用域" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.availableDomain_label }}
                        </template>
                    </el-table-column> -->
          <el-table-column label="IP">
            <template slot-scope="scope">
              {{ scope.row.specifyIp }}
            </template>
          </el-table-column>
          <el-table-column label="序列号">
            <template slot-scope="scope">
              {{ scope.row.sn }}
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope">
              <span v-if="scope.row.flavorType == 1">
                {{ scope.row.cpuNumber }}vCPU； {{ scope.row.memorySize }}G内存
              </span>
              <span v-else>
                {{ scope.row.cloudFlavorCode_desc || cloudFlavorCodeDesc(scope.row.cloudFlavorCode) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="系统盘">
            <template slot-scope="scope" v-if="scope.row.flavorType == 1 && scope.row.osDisk">
              {{ scope.row.osDisk.diskServerName || scope.row.osDisk.diskServerCode_label }}，{{
                scope.row.osDisk.dataDiskSize
              }}GB
            </template>
          </el-table-column>
          <el-table-column label="数据盘" width="230">
            <template slot-scope="scope" v-if="scope.row.disks && scope.row.flavorType == 1">
              <div style="margin: 0 0 6px 16px" v-for="(item, index) in scope.row.disks" :key="index">
                <span>{{ item.diskServerCode_label || item.diskServerName }}</span
                >，{{ item.dataDiskSize }}GB
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作系统版本" width="130">
            <template slot-scope="scope">
              {{ scope.row.osName || osName(scope.row.osServerCode) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            class-name="small-padding fixed-width"
            v-if="taskName == '资源申请' || taskName == '云服务商处理'"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                v-if="taskName == '资源申请'"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>数据库</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          v-if="form.databases"
          :data="[].concat(form.databases)"
          style="width: 100%; margin-top: 13px; font-size: 10px"
        >
          <el-table-column label="类型">
            <template slot-scope="scope">
              {{ scope.row.serverName || scope.row.serverCode_label }}
            </template>
          </el-table-column>
          <el-table-column label="版本">
            <template slot-scope="scope">
              <span>{{ scope.row.databaseVersion }}</span>
            </template>
          </el-table-column>
          <el-table-column label="位数">
            <template slot-scope="scope">
              {{ scope.row.systemDigits }}
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源申请'">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del(scope.row, scope.$index + form.hosts.length)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>存储产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          v-if="form.storeProducts"
          :data="[].concat(form.storeProducts)"
          style="width: 100%; margin-top: 13px; font-size: 10px"
        >
          <el-table-column label="磁盘类型">
            <template slot-scope="scope">
              {{ scope.row.diskServerCode_label || scope.row.diskCode }}
            </template>
          </el-table-column>
          <el-table-column label="磁盘用量">
            <template v-if="scope.row.dataDiskSize" slot-scope="scope">
              <span> {{ scope.row.dataDiskSize }}GB </span>
            </template>
          </el-table-column>
          <el-table-column label="存储类型">
            <template slot-scope="scope">
              {{ scope.row.productCode || scope.row.diskCode }}
            </template>
          </el-table-column>
          <el-table-column label="服务类型">
            <template slot-scope="scope">
              {{ scope.row.diskCode }}
            </template>
          </el-table-column>
          <el-table-column label="服务器">
            <template slot-scope="scope">
              <div v-for="item in scope.row.hosts">{{ gethostName(item.id) }}</div>
            </template>
          </el-table-column>
          <el-table-column v-if="false" width="650">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">费用</div>
              <div class="tab_wrap">
                <!-- <div>名称</div> -->
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.meterageList || scope.row.meterage">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <!-- <div>{{ item.resourceName ? item.resourceName : '' }}</div> -->
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>¥{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源申请'">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit-outline"
                @click="showAdd(2, scope.row, scope.$index)"
                >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="del(scope.row, scope.$index + form.hosts.length + form.databases.length)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="wrap">
      <div class="wrap_title">
        <div>安全产品</div>
      </div>
      <div style="padding: 20px 20px; width: 100%">
        <el-table
          v-if="form.safeProducts"
          :data="[].concat(form.safeProducts)"
          style="width: 100%; margin-top: 13px; font-size: 10px"
        >
          <el-table-column label="产品名称">
            <template slot-scope="scope">
              {{ scope.row.productName }}
            </template>
          </el-table-column>
          <el-table-column v-if="false" width="650">
            <template slot="header" slot-scope="scope">
              <div style="text-align: center">费用</div>
              <div class="tab_wrap">
                <div>用量</div>
                <div>单价</div>
                <div>总价（天）</div>
              </div>
            </template>
            <template slot-scope="scope" v-if="scope.row.meterageList || scope.row.meterage">
              <div
                class="tab_wrap"
                v-for="(item, index) in scope.row.meterageList || [scope.row.meterage]"
                :key="index"
              >
                <div>{{ item.useCount }}{{ item.useCountUnit }}</div>
                <div>{{ item.resourcePrice }}{{ item.resourcePriceUnit }}</div>
                <div>¥{{ item.resourcePriceTotalStr }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" class-name="small-padding fixed-width" v-if="taskName == '资源申请'">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="dels(scope.row, scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="priceFlag" style="margin-top: 10px; text-align: right; color: rgb(167, 167, 167)">
      预估费用：<span style="color: rgb(255, 173, 77); font-size: 24px">¥{{ parseInt(form.dailyPriceTotal) }}</span
      >/天
      <span style="margin-left: 20px; color: rgb(255, 173, 77); font-size: 24px"
        >¥{{ parseInt(form.yearPriceTotal) }}</span
      >/年
    </div>
    <div v-if="otherFlag" class="title" style="margin-top: 30px">其他</div>
    <div v-if="otherFlag" class="wrap2" style="padding-top: 1px">
      <div style="display: flex"><span style="font-weight: bold; margin-right: 10px">说明:</span>{{ form.remark }}</div>
      <div style="font-weight: bold">文件:</div>
      <el-table v-if="form.files" :data="form.files" style="width: 100%">
        <el-table-column prop="fileName" label="文件名称"> </el-table-column>
        <el-table-column prop="fileExt" label="文件类型"> </el-table-column>
        <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="previewFile(scope.row)"
              v-show="
                scope.row.fileExt == 'jpeg' ||
                scope.row.fileExt == 'jpg' ||
                scope.row.fileExt == 'png' ||
                scope.row.fileExt == 'pdf' ||
                scope.row.fileExt == 'gif'
              "
              >预览
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="DeleteFile(scope.row.id)"
              v-show="taskName == '资源申请'"
              >删除
            </el-button>
            <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)">下载 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <template v-if="taskName == '云服务商处理'">
        <div class="title" style="margin-top: 30px">处理结果</div>
        <div class="wrap2" style="padding-top: 1px">
          <div style="display: flex">
            <span style="font-weight: bold; margin-right: 10px">说明:</span>
            <el-input
              style="width: 600px"
              type="textarea"
              v-model="form.supplierRemark"
              placeholder="请输入说明"
            ></el-input>
          </div>
          <div style="font-weight: bold">
            文件:
            <el-upload
              class="upload-demo"
              style="display: initial"
              accept
              list-type="picture"
              :show-file-list="false"
              ref="upload"
              :file-list="form.supplierFiles"
              action=""
              :on-preview="handlePictureCardPreview"
              :on-remove="handleChanges"
              :on-change="handleChange"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </div>
          <el-table v-if="form.supplierFiles" :data="form.supplierFiles" style="width: 80%">
            <el-table-column label="文件名称">
              <template slot-scope="scope">
                {{
                  scope.row.fileName ? scope.row.fileName : scope.row.name.substring(0, scope.row.name.lastIndexOf("."))
                }}
              </template>
            </el-table-column>
            <el-table-column label="文件类型">
              <template slot-scope="scope">
                {{
                  scope.row.fileExt
                    ? scope.row.fileExt
                    : scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1, scope.row.name.length)
                }}
              </template>
            </el-table-column>
            <el-table-column label="">
              <template slot-scope="scope">
                <span :style="scope.row.fileExt ? 'color:green;' : 'color:red;'">
                  {{ scope.row.fileExt ? "已上传" : "" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              class-name="small-padding fixed-width"
              v-if="taskName == '云服务商处理'"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view" @click="previewFiles(scope.row)"
                  >预览
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="DeleteFiles(scope.row)"
                  v-if="taskName == '云服务商处理'"
                  >删除
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"
                  >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-else>
        <div class="title" style="margin-top: 30px">处理结果</div>
        <div class="wrap2" style="padding-top: 1px">
          <div style="display: flex">
            <span style="font-weight: bold; margin-right: 10px">说明:</span>{{ form.supplierRemark }}
          </div>
          <div style="font-weight: bold">文件:</div>
          <el-table
            v-if="form.supplierFiles ? form.supplierFiles.length > 0 : false"
            :data="form.supplierFiles"
            style="width: 100%"
          >
            <el-table-column prop="fileName" label="文件名称"> </el-table-column>
            <el-table-column prop="fileExt" label="文件类型"> </el-table-column>
            <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  v-show="
                    scope.row.fileExt == 'image/jpeg' ||
                    scope.row.fileExt == 'image/jpg' ||
                    scope.row.fileExt == 'image/png' ||
                    scope.row.fileExt == 'image/pdf' ||
                    scope.row.fileExt == 'image/gif'
                  "
                  @click="previewFile(scope.row)"
                  >预览
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="DeleteFile(scope.row.id)"
                  v-if="taskName == '云服务商处理'"
                  >删除
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-download" @click="download(scope.row)"
                  >下载
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="taskName == '资源申请'" style="font-weight: bold; margin-bottom: 10px">重新提交？增加文件:</div>
          <file-list
            v-if="taskName == '资源申请'"
            ref="fileList"
            :fileList="fileList"
            @changeFileList="changeFileList"
            @upload="upload"
          />
        </div>
      </template>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
    <!-- 修改弹窗配置 -->
    <el-dialog :title="addShow == 1 ? '新增' : '修改'" :visible.sync="addShow" width="70%" append-to-body>
      <div style="max-height: 90vh; overflow-y: scroll">
        <TodoBdialog
          ref="addBdialog"
          :configure="configure"
          :supplierCode="form.cloudUp ? form.cloudUp.supplierCode : ''"
          :hosts="form.hosts"
          :taskName="taskName"
          :addShow="addShow"
          @addTable="addTable"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="$refs.addBdialog.submit()">确 定</el-button>
        <el-button @click="addShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TodoBdialog from "../../resources/applyNoXc/TodoBdialog.vue";
import { DelectUploadFile } from "@/api/cloud/cloud";
import { v4 as uuidv4 } from "uuid";
import fileList from "@/components/FileList/index.vue";

export default {
  name: "addCtodoss",
  components: { TodoBdialog, fileList },
  props: {
    form: {
      // type: Object,
      default: null,
    },
    configure: {
      type: Object,
      default: {},
    },
    hosts: {
      type: Array,
      default: function () {
        return [];
      },
    },
    otherFlag: {
      type: Boolean,
      default: true,
    },
    priceFlag: {
      type: Boolean,
      default: false,
    },
    taskName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      base_url: process.env.VUE_APP_BASE_API,
      dialogImageUrl: "",
      dialogVisible: false,
      addShow: false,
      index: 0,
      yyaqList: null,
      fileList: [],
      // CloudServicesFile : [] //云服务审核文件
      //数据
      // form: {
      //     cloudSupplier: undefined, //服务商
      //     hosts: [], //服务器列表
      //     databases: [], //数据库列表
      //     storeProducts: [], //存储产品列表
      //     aqchecked: [], //安全产品
      //     safeProducts: [], //安全产品真实数据
      //     remark: '', //说明
      // },
    };
  },
  created() {},
  methods: {
    fileUp() {
      this.$refs.fileList.upload();
    },
    upload(files) {
      this.$emit("upload", files);
    },
    changeFileList(fileList) {
      this.fileList = fileList;
    },
    gethostName(id) {
      let name = "";
      this.form.hosts.some((item) => {
        if (item.id == id) {
          name = item.hostName;
          return true;
        }
      });
      return name;
    },
    // 翻译高性能规格
    cloudFlavorCodeDesc(data) {
      var Name = "";
      this.configure.wlfwqList.forEach((item) => {
        if (item.code == data) {
          Name = item.remark;
        }
      });
      return Name;
    },
    osName(code) {
      let serviceName;
      this.configure.czxtList.forEach((item) => {
        if (item.code == code) {
          serviceName = item.serviceName;
        }
      });
      return serviceName;
    },
    previewFile(item) {
      if (
        item.fileExt == "jpeg" ||
        item.fileExt == "jpg" ||
        item.fileExt == "png" ||
        item.fileExt == "gif" ||
        item.fileExt == "pdf"
      ) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
      } else {
        this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
      }
    },
    previewFiles(item) {
      if (item.filePath) {
        this.dialogImageUrl = this.base_url + item.filePath;
        this.dialogVisible = true;
        return;
      } else {
        if (
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpeg" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "jpg" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "gif" ||
          item.name.substring(item.name.lastIndexOf(".") + 1, item.name.length) == "png"
        ) {
          this.dialogImageUrl = item.url;
          this.dialogVisible = true;
          return;
        } else {
          this.$message.error(`仅限后缀名为 gif、jpeg、jpg、png 可预览`);
        }
      }
    },
    DeleteFile(id) {
      this.supplierFilesState = false;
      this.$confirm("是否删除该文件?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        DelectUploadFile(id).then((res) => {
          if (res.code == 200) {
            this.form.files = this.form.files.filter((item) => {
              if (item.id == id) {
              } else {
                return item;
              }
            });
            this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
              if (item.id == id) {
              } else {
                return item;
              }
            });
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
      });
      this.supplierFilesState = true;
    },
    download(item) {
      let downloadFile =
        this.base_url + "/system/downloadFile?fileName=" + item.fileName + "&filePath=" + item.filePath;
      window.location.href = downloadFile;
      return;
    },
    DeleteFiles(data) {
      this.supplierFilesState = false;
      this.$confirm("是否删除该文件?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (data.filePath) {
          DelectUploadFile(data.id).then((res) => {
            if (res.code == 200) {
              this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
                if (item.id == data.id) {
                } else {
                  return item;
                }
              });
              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
        } else {
          this.form.supplierFiles = this.form.supplierFiles.filter((item) => {
            if (item.uid == data.uid) {
            } else {
              return item;
            }
          });
        }
      });
      this.supplierFilesState = true;
    },
    //添加修改表格
    addTable(data) {
      data = JSON.parse(JSON.stringify(data));
      if (data.flavorType) {
        this.addHosts(data);
      } else if (data.serverCode) {
        this.addDatabases(data);
      } else if (data.diskServerCode) {
        this.addStoreProducts(data);
      } else {
        this.addShow = false;
        let hostIds = [];
        this.form.hosts.forEach((item) => {
          hostIds.push(item.id);
        });
        this.form.safeProducts = [];
        let safeProductsAll = [];
        data.forEach((items) => {
          this.configure.yyaqList.forEach((item) => {
            if (items == item.code) {
              safeProductsAll.push({
                productCode: item.code,
                productName: item.serviceName,
                hostIds,
              });
            }
          });
        });

        this.form.safeProducts = safeProductsAll;
      }
    },
    //添加存储产品列表
    addStoreProducts(data) {
      this.configure[data.productCode == "共享型" ? "ccList" : "fwcpList"].some((it) => {
        if (it.code == data.diskServerCode) {
          data.diskServerCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.storeProducts[this.index] = data;
      } else {
        this.form.storeProducts.push(JSON.parse(JSON.stringify(data)));
      }
      this.addShow = false;
    },
    //添加修改数据库列表
    addDatabases(data) {
      //数据库类型
      this.configure.sjkList.some((it) => {
        if (it.code == data.serverCode) {
          data.serverCode_label = it.serviceName;
          return true;
        }
      });
      if (this.addShow == 2) {
        this.form.databases[this.index] = data;
      } else {
        this.form.databases.push(data);
      }
      this.addShow = false;
    },
    //添加修改服务器列表
    addHosts(data) {
      if (Array.isArray(data.osServerCode)) {
        data.osServerCode = data.osServerCode[0];
      }
      //可用域
      this.configure.available_domain.some((item) => {
        if (item.dictValue == data.availableDomain) {
          data.availableDomain_label = item.dictLabel;
          return true;
        }
      });
      //数据盘类型
      data.disks.forEach((item) => {
        this.configure.ccList.some((it) => {
          if (it.code == item.diskServerCode) {
            item.diskServerCode_label = it.serviceName;
            return true;
          }
        });
      });
      if (data.flavorType == 1) {
        //系统盘类型
        this.configure.storage_type.some((item) => {
          if (item.code == data.osDisk.diskServerCode) {
            data.osDisk.diskServerCode_label = item.serviceName;
            return true;
          }
        });
        //规格
        this.configure.codeList.some((item) => {
          if (item.specCode == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.specName;
            data.cloudFlavorCode_desc = item.desc;
            return true;
          }
        });
      }
      if (data.flavorType == 2) {
        this.configure.wlfwqList.some((item) => {
          if (item.code == data.cloudFlavorCode) {
            data.cloudFlavorCode_label = item.serviceName;
            data.cloudFlavorCode_desc = item.remark;
            return true;
          }
        });
      }
      if (this.addShow == 2) {
        if (data.hostName && data.hostName == data.instanceName + "_" + data.num) {
          this.form.hosts[this.index] = data;
        } else {
          // alert(1)
          // this.form.hosts.splice(this.index, 1);
          this.form.hosts[this.index] = data;
          // let sum = this.form.hosts.length;
          // this.form.hosts.forEach((item) => {
          //     if (
          //         item.instanceName == data.instanceName &&
          //         item.num > sum
          //     ) {
          //         sum = item.num;
          //     }
          // });
          // data.num = sum + 1;
          // data.hostName = data.instanceName + "_" + data.num;
          // this.form.hosts.push(data);
        }
      } else {
        let num = Number(data.instanceNum);
        data.instanceNum = 1;
        let sum = this.form.hosts.length;
        this.form.hosts.forEach((item) => {
          if (item.instanceName == data.instanceName && item.num > sum) {
            sum = item.num;
          }
        });
        for (let i = 0; i < num; i++) {
          let temp = JSON.parse(JSON.stringify(data));
          if (!temp.num) {
            temp.num = sum + i + 1;
          }
          temp.id = uuidv4();
          temp.hostName = temp.instanceName + "_" + temp.num;
          this.form.hosts.push(temp);
        }
      }

      this.addShow = false;
    },
    //显示弹窗
    showAdd(num, data, index) {
      this.index = index;
      this.addShow = num;
      setTimeout(() => {
        let dat = JSON.parse(JSON.stringify(data));
        if (dat.diskServerCode && !dat.hostIds) {
          dat.hostIds = [];
        }
        this.$refs.addBdialog.init(dat, this.form.safeProducts);
      }, 200);
    },
    //删除
    del(data, index) {
      if (index < this.form.hosts.length) {
        this.form.hosts.splice(index, 1);
        this.form.databases = this.form.databases.filter((item) => {
          return item.hostId != data.id;
        });
        this.form.storeProducts = this.form.storeProducts.filter((item) => {
          if (item.hosts) {
            let ids = [];
            item.hosts.forEach((it) => {
              ids.push(it.id);
            });
            return ids.indexOf(data.id) < 0;
          }
          if (item.hostIds) {
            // alert(0)
            return item.hostIds != data.id;
          } else {
            return true;
          }
        });
      } else if (index < this.form.hosts.length + this.form.databases.length) {
        this.form.databases.splice(index - this.form.hosts.length, 1);
      } else {
        this.form.storeProducts.splice(index - this.form.hosts.length - this.form.databases.length, 1);
      }
    },
    dels(data, index) {
      this.$confirm("是否删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.form.safeProducts.splice(index, 1);
      });
    },
    //文件预览
    handlePictureCardPreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    //文件列表变化
    handleChange(res, fileList) {
      this.supplierFilesState = false;
      this.form.supplierFiles = fileList;
      this.supplierFilesState = true;
    },
    handleChanges(res, fileList) {},
  },
};
</script>

<style scoped lang="scss">
.dialog {
  padding-right: 20px;
  font-size: 12px;
  width: 100%;
  height: calc(100% - 110px);
  overflow-y: auto;
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .wrap {
    display: flex;
    background: #faf9ff;
    margin-top: 20px;
    border-radius: 10px;

    .wrap_title {
      padding: 0 10px;
      background: #f4f4f4;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;

      div {
        height: 100%;
        width: 14px;
        font-weight: bold;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .wrap_item {
      display: flex;
      margin-top: 20px;

      div:first-child {
        width: 90px;
        font-weight: bold;
      }

      i {
        line-height: 28px;
        margin-right: 10px;
        font-size: 20px;
        color: #e83112;
      }
    }
  }
  .wrap1 {
    padding: 0 20px 20px 0px;
    background: #faf9ff;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-left: 20px;
    overflow-x: hidden;
    min-width: 1380px;
    // justify-content: space-between;
    border-radius: 10px;
    div {
      margin-top: 20px;
      width: 25%;
      // margin-left: 20px;
      min-width: 340px;
      display: flex;
      border-bottom: 1px solid rgba(192, 196, 204, 0.5);
      padding-bottom: 10px;
      div {
        width: 100px;
        min-width: 100px;
        font-weight: bold;
        margin: 0;
        display: flex;
        padding-right: 10px;
        // justify-content: flex-end;
        color: #606266;
        border-bottom: 0px solid rgba(192, 196, 204, 0.5);
      }
    }
  }
  .wrap2 {
    padding: 0 20px 20px 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
    div {
      margin-top: 20px;
    }
  }
  .wrap3 {
    padding: 20px;
    background: #faf9ff;
    margin-bottom: 30px;
    justify-content: space-between;
    border-radius: 10px;
  }
  .tab_wrap {
    display: flex;
    justify-content: space-between;
    div {
      width: 25%;
      padding: 10px 0;
    }
    div:first-child {
      font-weight: bold;
    }
  }
}
</style>
